<template>
  <div>
    <h2>BABA有存款: {{money}}</h2>
    <button @click="borrowMoneyFromXm">找小明借钱100</button><br>
    <button @click="borrowMoneyFromXh">找小红借钱150</button><br>
    <button @click="borrowAll">找所有孩子借钱200</button><br>
    <br>
    <Son ref="son"/>
    <br>
    <Daughter ref="dau" />
  </div>
</template>

<script>
import Son from './Son'
import Daughter from './Daughter'

export default {
  name: 'ChildrenParentTest',
  data () {
    return {
      money: 1000
    }
  },

  methods: {
     //父亲找儿子小明借100元
     borrowMoneyFromXm(){
       //父亲的数据累加100
       this.money +=100;
       //如何在父组件内部获取子组件
       //ref算不算一种通信方式：可以在父组件内部获取子组件
       this.$refs.son.money-=100;
       //调用子组件方法
       this.$refs.son.study();
     },
     //父亲找女儿小红借150
     borrowMoneyFromXh(){
       this.money+=150;
       this.$refs.dau.money-=150;
     },
     borrowAll(){
        //任何VC都有$children属性,可以实现获取当前VC的全部子组件！！！
        //返回的是一个数组
        this.money+=400;
        this.$children.forEach(vc=>{
            vc.money-=200;
        })
        
     }
  },

  components: {
    Son,
    Daughter
  }
}
</script>

<style>

</style>
